<template>
	<view class="">
    <u-image style="line-height: 0" mode="widthFix" width="100%" height="auto" src="@/static/images/top-banner-shop.jpg"></u-image>
		<view>
			<view style="background-color: #fff;padding:10rpx 10rpx 0rpx 10rpx;margin-bottom: 2rpx;">
			  <u-grid :border="false" col="2">
			    <u-grid-item class="image-menu">
					<u-image @click="openCheXianForm" width="100%" height="auto" mode="widthFix" src="@/static/images/shop-toubao.png" :lazy-load="true"></u-image>
			    </u-grid-item>
				<u-grid-item class="image-menu">
					<u-image @click="openPage('/pages/ucp/registration')" width="100%" height="auto" mode="widthFix" src="@/static/images/shop-rule.png" :lazy-load="true"></u-image>
				</u-grid-item>
			  </u-grid>
			</view>
			
			<u-grid :border="false" col="4">
			  <u-grid-item @click="openPage('/pages/ucp/store-list')">
				<view>
					<u-image style="margin-bottom:5px;" width="72" height="72" mode="aspectFit" src="@/static/images/btn-store.png" :lazy-load="true"></u-image>
				</view>
				<text class="grid-text">服务门店</text>
			  </u-grid-item>
			  <u-grid-item @click="openPage(agreementUrl())">
				<view>
					<u-image style="margin-bottom:5px;" width="72" height="72" mode="aspectFit" src="@/static/images/btn-agreement.png" :lazy-load="true"></u-image>
				</view>
				<text class="grid-text">活动协议</text>
			  </u-grid-item>
			  <u-grid-item @click="openPage('/pages/ucp/registration')">
				<view>
					<u-image style="margin-bottom:5px;" width="72" height="72" mode="aspectFit" src="@/static/images/btn-register.png" :lazy-load="true"></u-image>
				</view>
				<text class="grid-text">活动报名</text>
			  </u-grid-item>
			  <u-grid-item @click="openPage('/pages/ucp/record-vehicle-data')">
				<view>
					<u-image style="margin-bottom:5px;" width="72" height="72" mode="aspectFit" src="@/static/images/btn-gasoline.png" :lazy-load="true"></u-image>
				</view>
				<text class="grid-text">加油登记</text>
			  </u-grid-item>
			</u-grid>
			
			<!-- <u-divider color="#5671dd" border-color="#5671dd" style="padding:15px 0;" font-size="36">商城热门</u-divider> -->
			<img src="@/static/images/shop-title.jpg" style="max-width: 100%;">
			
			<view class="wrap item-list">
							<template v-if="itemList.length==0">
								<u-empty mode="search" class="u-padding-50">
			
								</u-empty>
							</template>
							<u-row gutter="16">
								<u-col :span="6" v-for="(item, index) in itemList" :key="index">
									<view class="water-item single-item">
										<u-lazy-load @click="openPage('/pages/buy/item',{id:item.id})"
											loading-img="/static/images/loadingImg.png" threshold="-450" border-radius="10"
											:height="320" img-mode="aspectFit" :image="item.cover" :index="index">
										</u-lazy-load>
										<view class="today-sale-off" v-if="item.sale_off==1">今日特价</view>
										<u-line></u-line>
										<view class="item-title" @click="openPage('/pages/buy/item',{id:item.id})">
											{{item.name}}
										</view>
										<view class="item-remark" v-if="item.remark" @click="openPage('/pages/buy/item',{id:item.id})">
											{{item.remark}}
										</view>
										<view class="promotion-info" v-if="item.original_price>0" @click="openPage('/pages/buy/item',{id:item.id})">
											<view class="original-price">
												<template v-if="item.original_price>0">￥ {{item.original_price}}</template>&nbsp;
											</view>
										</view>
										<view class="item-buy">
											<view class="price">￥ <strong class="value">{{item.unit_price}}</strong>
												<view class="unit" v-if="item.unit">/{{item.unit}}</view>
											</view>
											<!-- <u-icon name="shopping-cart-fill" color="#e7000e" size="48" class="add-to-cart"
												@click="addToCart(item.id)"></u-icon> -->
										</view>
									</view>
								</u-col>
							</u-row>
						</view>
	
			<u-back-top :scroll-top="scrollTop"></u-back-top>
		</view>
		<wx-share :title='shop.name' :desc="shop.store_introduction" :imgUrl="shop.cover" link="/" ref="wxs"></wx-share>
		<custom-tabbar></custom-tabbar>
	</view>
</template>

<script>
	var ClipboardJS = require('clipboard')
	export default {
		data() {
			return {
				nav_background: {
					backgroundImage: 'linear-gradient(45deg, rgb(28 79 187), rgb(167 33 33))'
				},
				enableSticky: true,
				keyword: '',
				scrollTop: 0,
				pageTitle: '中勘石油微商城',
				sliders: [],
				currentCategory: 0,
				categories: [],
				paging: {
					sort_type: '',
					page_size: 50,
					current_page: 0,
					keyword: '',
					category_id: 0,
					total_pages: 1
				},
				sortTypes: [{
						label: '默认',
						value: 'id.desc',
					},
					{
						label: '价格',
						value: 'price.asc',
					}
				],
				loadStatus: 'loadmore',
				loadText: {
					loadmore: '加载更多',
					loading: '努力加载中',
					nomore: '加载完毕'
				},
				itemList: [],
				shop: {},
				iconMenus: [],
				imageMenus: [],

				articles: [],
				user: {},
			}
		},
		computed: {
			sortTitle() {
				if (this.paging.sort_type === 'id.desc') {
					return '默认'
				}
				if (this.paging.sort_type === 'price.asc') {
					return '价格'
				}
				return '排序'
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			if (this.paging.current_page >= this.paging.total_pages) {
				this.loadStatus = 'nomore';
				return;
			}
			this.loadStatus = 'loading';
			this.paging.current_page = ++this.paging.current_page;
			this.getItemList()
		},
		onLoad() {
			this.getCategories();
			this.getShop();
			this.getSliders();
			this.getIconMenus();
			this.getImageMenus();
			var clipboard = new ClipboardJS('.qd-clipboard');
      this.getArticleList()
		},
		mounted() {
			this.getItemList();
		},
		onShow() {
			this.enableSticky = true;
			this.getCart();
		},
		onHide() {
			this.enableSticky = false;
		},
		methods: {
			agreementUrl(){
				if(this.shop.user_agreement_id){
					return '/pages/article/detail?id='+this.shop.user_agreement_id
					// return this.openPage('/pages/article/detail',{id:this.shop.user_agreement_id})
				}
				return '/pages/ucp/index'
				// this.openPage('/pages/ucp/index') 
			},
			getSliders() {
				this.$u.post('/shopping/sliders', {}).then(res => {
					this.sliders = res;
				}).catch(e => {})
			},
			getIconMenus(){
				this.$u.post('/shopping/icon-menus', {}).then(res => {
					this.iconMenus = res;
				}).catch(e => {})
			},
      getArticleList() {
        this.$u.post('/article/list', this.paging).then(res => {
          if (res.page.current_page === 1) {
            this.articles = res.list;
          } else {
            this.articles = this.articles.concat(res.list)
          }
          this.paging.current_page = res.page.current_page;
          this.paging.total_pages = res.page.total_pages;
          this.paging.page_size = res.data.page_size;
        }).catch(e => {
          console.log(e)
        })
      },
			getImageMenus(){
				this.$u.post('/shopping/image-menus', {}).then(res => {
					this.imageMenus = res;
				}).catch(e => {})
			},
			getShop() {
				this.loading = true;
				this.$u.post('/shopping/shop-setting', {}).then(res => {
					this.shop = res;
					this.loading = false;
				}).catch(e => {

				})
			},
			getCategories() {
				this.$u.post('/category/all', {
					id: 1
				}).then(res => {
					console.log(res)
					const all = [{
						id: 0,
						name: '全部'
					}];
					this.categories = all.concat(res);

				}).catch(e => {
					console.log(e)
				})
			},
			getItemList() {
				this.$u.post('/item/list', {
					page_size: this.paging.page_size,
					current_page: this.paging.current_page,
					category_id: this.paging.category_id,
					name: this.paging.keyword,
					sort: this.paging.sort_type
				}).then(res => {
					if (res.page.current_page === 1) {
						this.itemList = res.list;
					} else {
						this.itemList = this.itemList.concat(res.list);
					}
					this.paging.current_page = res.page.current_page;
					this.paging.total_pages = res.page.total_pages;
					this.paging.page_size = res.data.page_size;
				}).catch(e => {

				})
			},
			categoryChange(index) {
				this.currentCategory = index;
				for (let i = 0; i < this.categories.length; i++) {
					if (index == i) {
						this.paging.category_id = this.categories[i].id;
						this.paging.current_page = 1;
						this.getItemList()
						break;
					}
				}
			},
			loadMore() {
				console.log('load more')
				if (this.paging.current_page < this.paging.total_pages) {
					this.paging.current_page = this.paging.current_page + 1;
					// this.getItemList();
          this.getArticleList()
				}
			},
			open() {

			},
			close() {

			},
			searchItemList() {
				this.paging.current_page = 1;
				this.getItemList()
			},
			changeSort(value) {
				this.paging.sort_type = value
				this.getItemList()
			},
			openPage(jumpURL, params = {}) {
				this.$u.route({
					type: 'to',
					params: params,
					url: jumpURL,
					animationType: 'slide-in-bottom'
				});
			},
			addToCart(itemId) {
				this.$u.post('/shopping/add-to-cart', {
					item_id: itemId
				}).then(res => {
					console.log(res)
					let qty = 0;
					for (let i = 0; i < res.length; i++) {
						qty += res[i].quantity;
					}
					// uni.setTabBarBadge({
					// 	index: 1,
					// 	text: qty.toString()
					// })
				}).catch(e => {

				})
			},
			getCart() {
				this.$u.post('/shopping/cart-list', {}).then(res => {
					console.log(res)
					let qty = 0;
					for (let i = 0; i < res.length; i++) {
						qty += res[i].quantity;
					}
					// if (qty > 0) {
					// 	uni.setTabBarBadge({
					// 		index: 1,
					// 		text: qty.toString()
					// 	})
					// } else {
					// 	uni.removeTabBarBadge({
					// 		index: 1
					// 	})
					// }
				}).catch(e => {

				})
			},
			openCheXianForm(){
				location.href='https://www.wjx.top/vm/tBmRjfw.aspx'
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: #ffffff;
	}
	
	.wrap-title{
		padding:15rpx;
		font-size: 38rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #EEE;
	}

	.sticky {
		background-color: #FFF;
		box-shadow: 0px 0px 3px 6px rgb(0 0 0 / 20%);
	}

	.sort_method {
		height: 50rpx;
		background-color: rgb(238, 238, 239);
		padding: 6rpx;
		border-radius: 10rpx;
	}

	.u-wrap {
		background-color: #FFF;
	}

	.item-title {
		font-size: 28rpx;
		line-height: 1.8;
		height: 100rpx;
		box-sizing: border-box;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: calc(100vw/2 - 38px);
		margin-top: 10rpx;
		text-overflow: ellipsis;
		
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		display: -moz-box;
		-moz-line-clamp: 2;
		-moz-box-orient: vertical;
		overflow-wrap: break-word;
		word-break: break-all;
		white-space: normal;
		overflow: hidden;
	}

	.item-remark {
		font-size: 26rpx;
		color: #333333;
		font-weight: 300;
		line-height: 1.8;
		height: 44rpx;
		margin-bottom: 10rpx;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.original-price {
		color: #333333;
		text-decoration: line-through;
		height: 38rpx;
	}

	.item-buy {
		display: flex;
		flex-direction: row;
	}

	.price {
		flex: 1;
		color: red;
	}

	.price .value {
		font-size: 42rpx;
		font-weight: bold;
	}

	.price .unit {
		font-weight: 300;
		color: #CCC;
		display: inline;
	}

	.add-to-cart {
		width: 48rpx;
	}


	/* .wrap {
		padding: 15px;
		box-sizing: border-box;
	} */
	.water-item {
		border-radius: 16rpx;
		margin: 10rpx 0;
		background-color: #fff;
		padding: 16rpx;
		position: relative;
	}

	.today-sale-off {
		position: absolute;
		font-size: 24rpx;
		top: 0;
		left: 0;
		background-color: rgba(255, 0, 0, 0.6196078431372549);
		color: #fff;
		padding: 10rpx;
		padding-right: 2em;
		/* border-radius: 8px; */
		border-bottom-right-radius: 100%;
		border-top-left-radius: 16rpx;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.u-demo {
		//height: 200vh;
		height: calc(100% - 44px);
		height: calc(100% - 44px - constant(safe-area-inset-top));
		height: calc(100% - 44px - env(safe-area-inset-top));
	}

	.wrap {
		padding: 0 10rpx;
		width: 100%;
		background-color: #FFF;
	}

	.navbar-right {
		margin-right: 24rpx;
		display: flex;
	}

	.search-wrap {
		margin: 0 20rpx;
		flex: 1;
	}

	.right-item {
		margin: 0 12rpx;
		position: relative;
		color: #ffffff;
		display: flex;
	}

	.message-box {}

	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.map-wrap {
		display: flex;
		align-items: center;
		padding: 4px 6px;
		background-color: rgba(240, 240, 240, 0.35);
		color: #fff;
		font-size: 22rpx;
		border-radius: 100rpx;
		margin-left: 30rpx;
	}

	.map-wrap-text {
		padding: 0 6rpx;
	}

	.u-back-top {
		background-color: rgba(225, 225, 225, 0.56);
	}

	.image-menu-box{
		display: flex;
	}
	.image-menu-box .left-side{
		width: 40%;
		padding:8px;
		box-sizing: border-box;
	}
	.image-menu-box .right-side{
		flex:1;
		padding:8px 8px 8px 0;
	}
	::v-deep .image-menu .u-grid-item-box{
		padding: 0px 8rpx!important;;
	}
	
	.u-card-wrap {
		background-color: $u-bg-color;
		padding: 1px;
	}
	
	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}
	
	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}
</style>